<section data-ng-controller="SessionsController" data-ng-init="initCreateSessionForm()">
    <style>
        #selectedAudience div.alert{
            display: inline-block;
            white-space: nowrap;
        }
    </style>
    <script type="text/ng-template" id="userSuggestTemplate.html">
        <a>
            <span bind-html-unsafe="match.model.displayName | typeaheadHighlight:query"></span>
        </a>
    </script>

    <div class="page-header">
        <h1>Create Session<a href="/#!/sessions" class="btn btn-success pull-right" >All Sessions</a></h1>
    </div>
    <div class="col-md-12">
        <form name="sessionForm" class="form-horizontal" data-ng-submit="create()" novalidate>
            <fieldset>

                <div class="form-group" ng-class="{ 'has-error': sessionForm.group.$dirty && sessionForm.group.$invalid }">
                    <label class="control-label" for="ddlGroup">Group</label>
                    <div class="controls">
                        <select
                                id="ddlGroup"
                                class="form-control"
                                placeholder="Group"
                                ng-model="group"
                                name="group"
                                ng-options="group.title for group in activeGroups track by group.id"
                                ng-change="groupChnaged(group)"
                                required
                                >
                            <option value=""></option>
                        </select>
                    </div>
                </div>

                <div class="form-group" ng-class="{ 'has-error': sessionForm.title.$dirty && sessionForm.title.$invalid }">
                    <label class="control-label" for="title">Title</label>
                    <div class="controls">
                        <input name="title" type="text" data-ng-model="title" id="title" class="form-control" placeholder="Title" required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label" for="content">Content</label>
                    <div class="controls">
                        <textarea name="content" data-ng-model="content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="chkPresenter">Presenter</label>
                    <div class="controls" id="chkPresenter">
                        <span ng-repeat="member in groupMembers">
                            <input type='checkbox'  value="{{member._id}}" ng-click="presenterSelection(member._id)"> {{member.displayName}}<br />
                        </span>
                        <i ng-show="groupMembers.length<=0">No members in selected group.</i>
                        <!--<pre>Model: {{selectedAudience | json}}</pre>-->
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="schedule">Schedule</label><br/>
                    <div class="controls col-md-4" style="margin-top:36px;">
                        <p class="input-group">
                            <input type="text" id="schedule" class="form-control" datepicker-popup="dd-MMMM-yyyy" ng-model="scheduleDate" is-open="schedulesOnDatePicker" min-date="today" max-date="'2022-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="openSchedulesOnDatePicker($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        </p>

                    </div>
                    <div class="controls col-md-4" >

                    <timepicker ng-model="scheduleTime" hour-step="1" minute-step="10" show-meridian="true" ng-required="true"></timepicker>

                    </div>
                </div>

                <div class="form-group" ng-class="{ 'has-error': sessionForm.group.$dirty && sessionForm.group.$invalid }">
                    <label class="control-label" for="ddlDuration">Duration</label>
                    <div class="controls">
                        <select
                                id="ddlDuration"
                                class="form-control"
                                placeholder="Duration"
                                ng-model="duration"
                                name="duration"
                                ng-options="duration for duration in durations"
                                required
                                >
                            <option value=""></option>
                        </select>
                    </div>
                </div>

                <!--<div class="form-group" ng-class="{ 'has-error': sessionForm.by.$dirty && sessionForm.by.$invalid }">
                    <label class="control-label" for="by">By</label>
                    <div class="controls">
                        <input type="text"  typeahead-template-url="userSuggestTemplate.html" ng-model="by" placeholder="BY" typeahead="user as user.displayName for user in suggestUsers($viewValue)" typeahead-loading="loadingUserSuggestions" typeahead-wait-ms="500" class="form-control">
                        <i ng-show="loadingUserSuggestions" class="glyphicon glyphicon-refresh"></i>
                    </div>
                </div>-->
                <!--<select ng-model="selectedGroup" ng-chage="groupChnaged"  ng-options="activeGroups">
                    <option ng-repeat="grp in activeGroups" value="{{grp.id}}" >{{grp.title}}</option>
                </select>-->
                <!--<select ng-options="group as group.title for group in activeGroups"
                        ng-model="selectedGroup" ng-attr-value="1" ng-change="groupChnaged()"></select>
-->







                <!--<div class="form-group">
                    <label class="control-label" for="audience">Audience</label>
                    <div class="controls">
                        <input type="text"  typeahead-template-url="userSuggestTemplate.html" ng-model="ppl" placeholder="Audience" typeahead="user as user.displayName for user in suggestUsers($viewValue)" typeahead-loading="loadingUserSuggestions" typeahead-wait-ms="500" class="form-control" typeahead-on-select='onAudienceSelect($item, $model, $label)'>
                        <i ng-show="loadingUserSuggestions" class="glyphicon glyphicon-refresh"></i>
                    </div>
                </div>
                <div id="selectedAudience">
                    <alert ng-repeat="person in audience" type="success" close="removeAudience($index)">{{person.displayName}}</alert>
                </div>-->

                <div class="form-group">
                    <input type="submit" class="btn btn-default">
                </div>
                <div data-ng-show="error" class="text-danger">
                    <strong data-ng-bind="error"></strong>
                </div>
            </fieldset>
        </form>
    </div>
</section>
